<template>
  <div class="distributor_gear">
    <el-dialog title="分配机构" class="noselect"
               v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm" >
        <el-tree
          id="myPanel"
          :data="treeData"
          show-checkbox
          node-key="value"
          ref="tree"
          default-expand-all
          :default-checked-keys="checkedKey"
          :props="defaultProps" >
        </el-tree>
      </el-form>
      <div class="foot-bar-button">
        <el-button :disabled="canSave" type="primary" size="medium" @click="submitForm('modelForm')">
          <span v-if="canSave"><i class="el-icon-loading"></i>提交中</span>
          <span v-else>提交</span>
        </el-button>
        <!--<el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>-->
        <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//注意路径
export default {
  props: ["isShow", "reason","id"], //参数
  data() {
    return {
      canSave:false,
      modelForm: {},
      showDialog: false,
      activityId: "",
      isSave: true,
      downCategeryId: [],
      isUpdate: false,
      treeData: [],
      names:[{name:""}],
      checkedKey:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  watch: {
    isShow: function(newValue, oldValue) {
      this.showDialog = newValue;
      this.canSave=false;
      this.checkedKey=[];
      if (newValue) {
        {
          if(this.id!=''){
            this.isSave = false;
            this.isUpdate = true;
            this.$axios.get("auxiliary/comments/allocationBranch?id="+this.id).then(data => {
              var tree = data.content.districts;
              this.newLabel(tree);
              this.treeData = tree;
              var ids=[];
              for(var i=0;i<data.content.branchList.length;i++){
//                ids.push(data.content.branchList[i].districtId);
                ids.push(data.content.branchList[i].branchId+"_b");
              }
              this.checkedKey=ids;
            });
          }else{
            this.isSave = true;
            this.isUpdate = false;
            this.$axios.get("auxiliary/comments/allocationBranch").then(data => {
              var tree = data.content.districts;
              this.newLabel(tree);
              this.treeData = tree;
            });
          }

        }
      }
    }
  },
  created() {
    window.this = this;
  },
  methods: {
    newLabel(newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          console.log(newList[i].iBranch);
          if(newList[i].iBranch){
            newList[i].value = newList[i].id + "_b";
          }else {
            newList[i].value = newList[i].id + "";
          }
          newList[i].label = newList[i].name;
          if (!newList[i].children || newList[i].children.length == 0) {
            newList[i].children = null;
          } else {
            for (var s = 0; s < newList[i].children.length; s++) {
              if(newList[i].iBranch){
                newList[i].children[s].value = newList[i].children[s].id + "_b";
              }else {
                newList[i].children[s].value = newList[i].children[s].id + "";
              }
              newList[i].children[s].label = newList[i].children[s].name;
              this.newLabel(newList[i].children[s].children);
            }
          }
        }
      }
    },
    goBack() {
      this.router.go(-1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
           var selectBransh=[];
          var branchs=this.$refs.tree.getCheckedNodes();
          console.log(branchs);
          for(var i=0;i<branchs.length;i++){
            if(branchs[i].iBranch){
              selectBransh.push(branchs[i].id);
            }
          }
           if(selectBransh.length<=0){
            this.$message.error("请选择门店");
            return;
           }
          var data={};
          var ids=[];
          for(var i=0;i<this.reason.length;i++){
            ids.push(this.reason[i].id)
          }
          if(this.isUpdate){
            ids.push(this.id);
          }
          data.ids=ids;
          data.branchs=selectBransh;

          if(this.canSave){
            return;
          }
          this.canSave=true;

            this.$axios
              .post("auxiliary/comments/allocationBranch",data,"json")
              .then(data => {
                this.canSave=false;
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: "success"
                  });
                  this.$emit("addSuccess");
                } else {
                  this.$message.error(data.message);
                }
              });

        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$emit("close");
      this.showDialog = false;
    },
    handleClose(done) {
      this.$emit("close");
      done();
    },

  }
};
</script>
<style scoped>
</style>
